<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav" @click="goBack"></a>
			<h1 class="mui-title">报修申请</h1>
		</header>
		<div class="mui-content">
			<div id="leave" class="mui-content otherContent asignCommon">
				<form name="form" @submit.prevent="handleSubmit">
					<ul class="mui-table-view commonList require marginBorder">
						<li class="mui-table-view-cell">
							<a class="noRight mui-input-row">
								<label for="">报修地点</label>
								<input type="text" class="input" v-model="repairLocation" placeholder="请输入(必填)" />
							</a>
						</li>
					</ul>
					<ul class="mui-table-view commonList require marginBorder">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right mui-input-row" @click="RepairTime">
								<label for="">报修时间</label>
								<input type="text" class="input" placeholder="请选择(必填)" :value="repairTime" v-model="repairTime" readonly />
							</a>
						</li>
					</ul>
					<ul class="mui-table-view commonList require marginBorder">
						<li class="mui-table-view-cell">
							<a class="noRight mui-input-row">
								<label for="">报修人电话</label>
								<input type="number" pattern="[0-9]*" class="input leaveDays" v-model="repairTel" placeholder="请输入(必填)" />
							</a>
						</li>
					</ul>
					<ul class="mui-table-view commonList require marginBorder">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right mui-input-row" @click="RepairContent">
								<label for="">报修内容</label>
								<input type="text" class="input" placeholder="请选择(必填)" :value="repairContent" v-model="repairContent" readonly />
							</a>
						</li>
					</ul>
					<ul class="mui-table-view commonList require marginBorder">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right mui-input-row" @click="RepairReason">
								<label for="">报修故障原因</label>
								<input type="text" class="input" placeholder="请选择(必填)" :value="repairReason" v-model="repairReason" readonly />
							</a>
						</li>
					</ul>
					<ul class="mui-table-view commonList require marginBorder">
						<li class="mui-table-view-cell">
							<a class="noRight mui-input-row">
								<label for="">其它原因</label>
								<input type="text" class="input" v-model="otherReason" placeholder="请输入(非必填)" />
							</a>
						</li>
					</ul>
					<ul class="mui-table-view commonList require marginBorder">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right mui-input-row">
								<label for="">是否人为损坏</label>
								<input type="text" class="input" placeholder="请选择(必填)" :value="isManual" v-model="isManual" @click="IsManual" readonly />
							</a>
						</li>
					</ul>
					<span class="submit">
			        <fieldset style="border:none;"><button>提交</button></fieldset>
			   </span>
				</form>
			</div>
		</div>
	</div>
</template>
<script>
	import axios from 'axios'
	import {
		loadFromLocal
	} from '@/service/store';
	import {
		getFlowData,
		getRepairType
	} from '@/service/getData';
	export default {
		data() {
				return {
					myUser: loadFromLocal("myUser", "obj"),
					repairLocation: "",
					repairTime: "",
					repairTel: "",
					repairContent: "",
					repairReason: "",
					otherReason: "",
					isManual: "",
					instanceId: "",
					WorkflowId: "",
					typeArr: [],
					typeId: "",
					reasonData: [],
					typeReasonArr: []
				}
			},
			created() {
				let sRoute = this.$route.params.Id.split('&');
				this.instanceId = sRoute[1] == 'null' ? "" : sRoute[1];
				this.WorkflowId = sRoute[0];
				if(this.instanceId) {
					getFlowData({
						InstanceID: this.instanceId
					}).then((res) => {
						this.repairLocation = res.data.info['报修地点'];
						this.repairTime = res.data.info['报修时间'];
						this.repairTel = res.data.info['报修人电话'];
						this.repairContent = res.data.info['报修内容'];
						this.repairReason = res.data.info['报修故障原因'];
						this.otherReason = res.data.info['其它原因'];
						this.isManual = res.data.info['是否人为损坏'];
						this.typeId = res.data.info.RepairApplyTypeID;
						this.WorkflowId = res.data.info.FlowID;
					});
				}
				let self = this;
				getRepairType({
					SchoolID: this.myUser.schoolId
				}).then((res) => {
					self.reasonData = res.data.reason;
					(res.data.type || []).forEach(function(ele) {
						self.typeArr.push({
							value: ele.RepairApplyTypeID,
							text: ele.RepairApplyTypeName
						})
					})
				});
			},
			vuerify: {
				repairLocation: {
					test: 'required',
					message: '报修地点必填'
				},
				repairTime: {
					test: 'required',
					message: '报修时间必填'
				},
				repairTel: {
					test: 'required',
					message: '报修人电话必填'
				},
				repairContent: {
					test: 'required',
					message: '报修内容必填'
				},
				repairReason: {
					test: 'required',
					message: '报修故障原因必填'
				},
				isManual: {
					test: 'required',
					message: '是否人为损坏必填'
				}
			},
			methods: {
//				console.log(this.vuerify)
				//报修时间
				RepairTime() {
					let self = this;
					let dtPicker = new mui.DtPicker({
						type: 'datetime',
						beginDate: new Date("2000-01-01 00:00")
					});

					dtPicker.show(function() {
						self.repairTime = this.getSelected().text;
					})
				},
				//报修内容
				RepairContent() {
					let self = this;
					let typePicker = new mui.PopPicker();
					typePicker.setData(self.typeArr);
					typePicker.show(function(selectItems) {
						//						debugger
						self.repairContent = selectItems[0].text;
						self.typeId = selectItems[0].value;
						self.typeReasonArr = [];
						self.repairReason = "";
					})
				},
				//报修故障原因
				RepairReason() {
					let self = this;
					self.typeReasonArr = [];
					let typeReasonPicker = new mui.PopPicker();
					(self.reasonData || []).forEach(function(ele) {
						if(ele.RepairApplyTypeID == self.typeId) {
							self.typeReasonArr.push({
								value: ele.RepairApplyID,
								text: ele.Remark
							})
						}
					})
					typeReasonPicker.setData(self.typeReasonArr);
					typeReasonPicker.show(function(selectItems) {
						self.repairReason = selectItems[0].text;
					})
				},
				//是否人为损坏
				IsManual() {
					let self = this;
					let IsManual = new mui.PopPicker();
					IsManual.setData([{
						value: '1',
						text: '是'
					}, {
						value: '2',
						text: '否'
					}]);
					IsManual.show(function(selectItems) {
						self.isManual = selectItems[0].text;
					})
				},
				handleSubmit() {
					if(this.$vuerify.check()) { // 手动触发校验所有数据
						// do something
						let self = this;
						axios({
							url: window.host + '/Workflow/GeneralApply/Initiate',
							method: 'post',
							data: {
								"userId": this.myUser.userId,
								"schoolId": this.myUser.schoolId,
								"WorkflowId": this.WorkflowId,
								"FormData": JSON.stringify({
									"报修地点": this.repairLocation,
									"报修时间": this.repairTime,
									"报修人电话": this.repairTel,
									"报修内容": this.repairContent,
									"报修故障原因": this.repairReason,
									"其它原因": this.otherReason,
									"是否人为损坏": this.isManual,
									"InstanceID": this.instanceId,
									"RepairApplyTypeID": this.typeId
								})
							},
							transformRequest: [function(data) {
									// Do whatever you want to transform the data
									let ret = ''
									for(let it in data) {
										ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
									}
									return ret
								}]
								//						headers: {
								//							'Content-Type': 'application/x-www-form-urlencoded'
								//						}
						}).then(function(res) {
//							debugger
							self.$router.push({
								name: 'Office',
								params: {
									token: self.myUser.token,
									schoolId: self.myUser.schoolId,
									userId: self.myUser.userId
								}
							})
						})
					} else {
						// 返回直接定义在该对象上的可枚举属性
						for(var i in this.$vuerify.$errors) {
							if(this.$vuerify.$errors.hasOwnProperty(i)) {
								mui.toast(this.$vuerify.$errors[i]);
								return false;
							}
						}
					}
				}
			}
	}
</script>
<style>

</style>